<template>
	<div class ="treeTable">
  <at-table :data="data" style="width: 100%" :row-style="showTr" 
  @filter-change="filterChangeChcild"
  @select="selectChangeChild"
  @select-all="selectChangeChild">
 	<at-table-column type="selection" v-if="ifselect" :selectable="select"></at-table-column>
    <at-table-column v-for="(column, index) in columns" 
      :key="column.dataIndex"
      :label="column.text" 
      :filters="columns[index].filters"
      :column-key="columns[index].treeKey"
      :prop="columns[index].dataIndex"
      :width="columns[index].width"
      :filter-method="columns[index].filterMethods">
      <template slot-scope="scope">
      <slot v-if="columns[index].ifCustom" :name="columns[index].dataIndex" :scope="scope">      	
      </slot>
      <div v-if="!columns[index].ifCustom">
        <span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space"></span>
        <button class="button is-outlined is-primary is-small" v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)" style="border:none;background:none;color:#ccc;width:20px">
          <img v-if="!scope.row._expanded" v-bind:src="rightPng" />
          <img v-if="scope.row._expanded" v-bind:src="downPng"  />
        </button>
        <span v-else-if="index===0" class="ms-tree-space"></span>
        	{{scope.row[column.dataIndex]}}
        </div>
      </template>
    </at-table-column>
  </at-table>
  </div>
</template>
<script>
 	import AtTable from "../../Tablesrc/src/table.vue";
 	import AtTableColumn from "../../Tablesrc/src/table-column.js"
	import Utils from '../utils/index.js';
	import rightPng from './../images/listRight.png';
	import downPng from './../images/more.png';
	export default {
		name: 'treegrid',
		data(){
			return{
				rightPng:rightPng,
				downPng:downPng
			};
		},
		components:{
			AtTable,AtTableColumn
		},
		props: {
			treeKey: {
				type:String,
				default: function () {
					return "";
				}
			},
			selectChange: {
				type:Function,
				default: function () {
					return null
				}
			},
			// 该属性是确认父组件传过来的数据是否已经是树形结构了，如果是，则不需要进行树形格式化
			treeStructure: {
				type: Boolean,
				default: function () {
					return false;
				}
			},
			// 这是相应的字段展示
			columns: {
				type: Array,
				default: function () {
					return [];
				}
			},
			// 这是数据源
			dataSource: {
				type: Array,
				default: function () {
					return [];
				}
			},
			// 这个作用是根据自己需求来的，比如在操作中涉及相关按钮编辑，删除等，需要向服务端发送请求，则可以把url传过来
			requestUrl: {
				type: String,
				default: function () {
					return '';
				}
			},
			// 这个是是否展示操作列
			treeType: {
				type: String,
				default: function () {
					return 'normal';
				}
			},
			// 是否默认展开所有树
			defaultExpandAll: {
				type: Boolean,
				default: function () {
					return false;
				}
			},
			filterChange: {
				type:Function,
				default: function () {
					return null;
				}
			},
			index:{
				type:Number,
				default:function () {
					return 0;
				}
			},
			vmd:{
				type:String,
				default:function () {
					return "";
				}
			},
			ifselect:{
				type:Boolean,
				default:function (){
					return false
				}
			},
			ifStyle:{
				type:Boolean,
				default:function (){
					return false
				}
			},
			cusStyle:{
				type:String,
				default:function (){
					return  ""
				}
			}
		},
		computed: {
			// 格式化数据源
			data: function () {
				let me = this;
				if (me.treeStructure) {
					let data = Utils.MSDataTransfer.treeToArray(me.dataSource, null, null, me.defaultExpandAll);
					return data;
				}
				return me.dataSource;
			}
		},
		methods: {
			// 显示行
			showTr: function (row) {
				let show = row._parent ? row._parent._expanded && row._parent._show : true;
				row._show = show;
				let ro = row.children ? 1:0;
				if(this.ifStyle){
					if(show){
						if(ro){
							return this.cusStyle
						}else{
							return ""
						}					
					}else{
						if(ro){
							return  this.cusStyle + "display:none;"
						}else{
							return "display:none;"
						}
					}
				}						
			 	return show ? '' : 'display:none;';
			 },
    		// 展开下级
			toggle: function (trIndex) {
				let me = this;
				let record = me.data[trIndex];
				record._expanded = !record._expanded;
			},
    		// 显示层级关系的空格和图标
			spaceIconShow (index) {
				let me = this;
				if (me.treeStructure && index === 0) {
					return true;
				}
				return false;
			},
    		// 点击展开和关闭的时候，图标的切换
			toggleIconShow (index, record) {
				let me = this;
				if (me.treeStructure && index === 0 && record.children && record.children.length > 0) {
					return true;
				}
				return false;
			},
			filterChangeChcild(row){
				this.filterChange(row, this.index, this.vmd);
			},
			select(row,ind){
		        if(row.rstate === null){
		            return true;
		        }
        		return false;
      		},
      		selectChangeChild(a,b){
        let offcheck = []
        if(b){
          //是否被勾选
          let r = false;
          a.forEach(row => {if(b.index == row.index)r = true;})
          if(!r){
            let pif = false;
            a.forEach(row => {if(b.parentId == row.index)pif = true;})
            if(pif){
              //处理父节点
              let p = [];
              let me = this;
              function parent(arr){
                if(arr.parentId){
                  me.data.forEach(row => {
                    if(arr.parentId == row.index){
                      parent(row);
                      p.push(row);
                    }
                  })
                }else{
                  p.push(arr);  
                }
              }
              if(b.parentId){
                parent(b);
              }
              p.forEach(row => {
                a.forEach(rows => {
                  if(rows.index == row.index){
                    //取消父的勾选
                    this.$refs.multipleTable.toggleRowSelection(row);
                    offcheck.push(row);
                  }
                })
              })
            }
          }
          //子节点
          let carr = [];
          function child(arr){
            for(let i=0;i<arr.length;i++){
              if(arr[i].children && arr[i].children.length > 0){
                child(arr[i].children);
              }
              carr.push(arr[i])
            }
          }
          b.children && child(b.children);
          let arrCheck = a;
          carr.forEach(row => {
            let r2 = true;
            arrCheck.forEach(rows => {
              //子被勾选
              if(rows.index == row.index){
                r2 = false;
              }
            })
            //父取消勾选
            if(!r){
              //子被勾选
              if(!r2){
                //取消子的勾选
                row.rstate !== "2" && this.$refs.multipleTable.toggleRowSelection(row);
                offcheck.push(row);
              }
            }else{
              if(r2){
                row.rstate !== "2" && this.$refs.multipleTable.toggleRowSelection(row)
              }
            }
          })
        }
        let oncheck = [];
        for(let i=0;i<a.length;i++){
          let re = true;
          for(let k=0;k<offcheck.length;k++){
            if(a[i].index == offcheck[k].index){
              re = false;
            }
          }
          re && oncheck.push(a[i])
        }
        this.selectChange(oncheck,this.index);
      },
		}
	};
</script>
<style>
  .treeTable .ms-tree-space{
    position: relative;
    top: 1px;
    display: inline-block;
    font-weight: 400;
    line-height: 1;
    width: 18px;
    height: 14px;}
  .treeTable .ms-tree-space::before{content: ""}
  .treeTable .at-table td {
    height: 24px;
    min-width: 0;
    text-overflow: ellipsis;
    vertical-align: middle;
}
  .treeTable .cell{
	font: 12px "Microsoft YAHEI";
	font-weight:normal; 
}
  .treeTable .at-table table tr:nth-of-type(even) .at-checkbox{
  	margin-left:-1px;
}
  .treeTable thead{
	font-size:12px;border:1px solid #e6ebf1;
}
.treeTable .at-table__header{
	border:1px solid #e6ebf1;
}
.treeTable .at-table th{
	background:#f3f5f9;
}
.treeTable tbody td:first-of-type{
	color:#5c6781 !important;
}
.treeTable .at-table:before{
	display: none;
}
</style>